<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="160px" label-position="left">
      <div class="form-list">
        <div class="box-radius">
          <div class="form-list-title">运维人员</div>
          <el-form-item label="离部日期提醒" prop="peopleNotifyInterval">
            <el-input-number
              class="marg-rt"
              v-model="form.peopleNotifyInterval"
              controls-position="right"
              :min="1"
              :max="30"></el-input-number
            >天
            <el-tooltip content="人员离部时间,提前提醒天数设置" placement="top" effect="light">
              <i class="el-icon-question el-icon"></i>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="提醒角色" prop="peopleNotifyRoles">
            <el-select v-model="form.peopleNotifyRoles" placeholder="请选择" multiple>
              <el-option v-for="item in rolesOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
            <el-tooltip content="设置提醒角色" placement="top" effect="light">
              <i class="el-icon-question el-icon"></i>
            </el-tooltip>
          </el-form-item>
        </div>
      </div>
      <div class="form-list">
        <div class="box-radius">
          <div class="form-list-title">项目</div>
          <el-form-item label="资质有效提醒" prop="projectCredentialNotifyInterval">
            <el-input-number
              class="marg-rt"
              v-model="form.projectCredentialNotifyInterval"
              controls-position="right"
              :min="1"
              :max="30"></el-input-number
            >天
            <el-tooltip content="单位资质有效期,提前提醒天数设置" placement="top" effect="light">
              <i class="el-icon-question el-icon"></i>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="服务周期提醒" prop="projectServiceNotifyInterval">
            <el-input-number
              class="marg-rt"
              v-model="form.projectServiceNotifyInterval"
              controls-position="right"
              :min="1"
              :max="30"></el-input-number
            >天
            <el-tooltip content="项目服务周期提醒,提前提醒天数设置" placement="top" effect="light">
              <i class="el-icon-question el-icon"></i>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="提醒角色" prop="projectNotifyRoles">
            <el-select v-model="form.projectNotifyRoles" placeholder="请选择" multiple>
              <el-option v-for="item in rolesOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
            <el-tooltip content="设置提醒角色" placement="top" effect="light">
              <i class="el-icon-question el-icon"></i>
            </el-tooltip>
          </el-form-item>
        </div>
      </div>
      <div class="form-list">
        <div class="box-radius">
          <div class="form-list-title">设备</div>
          <el-form-item label="归还时间提醒" prop="assetsBackNotifyInterval">
            <el-input-number
              class="marg-rt"
              v-model="form.assetsBackNotifyInterval"
              controls-position="right"
              :min="1"
              :max="30"></el-input-number
            >天
            <el-tooltip content="归还时间提醒,提前提醒天数设置" placement="top" effect="light">
              <i class="el-icon-question el-icon"></i>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="过保时间提醒" prop="assetsOverRepairNotifyInterval">
            <el-input-number
              class="marg-rt"
              v-model="form.assetsOverRepairNotifyInterval"
              controls-position="right"
              :min="1"
              :max="30"></el-input-number
            >天
            <el-tooltip content="过保时间提醒,提前提醒天数设置" placement="top" effect="light">
              <i class="el-icon-question el-icon"></i>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="提醒角色" prop="assetsNotifyRoles">
            <el-select v-model="form.assetsNotifyRoles" placeholder="请选择" multiple>
              <el-option v-for="item in rolesOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
            <el-tooltip content="设置提醒角色" placement="top" effect="light">
              <i class="el-icon-question el-icon"></i>
            </el-tooltip>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="footer">
      <el-button type="primary" @click="submitForm('form')">保存</el-button>
      <!-- <el-button @click="resetForm('form')">取消</el-button> -->
    </div>
  </div>
</template>

<script>
import { updateConfig, getConfig ,getRole} from '@/api/specialProject/warningConfig.js'
export default {
  data() {
    return {
      form: {},
      rules: {
        peopleNotifyInterval: [{ required: true, message: '请输入离部日期提醒', trigger: 'change' }],
        peopleNotifyRoles: [{ required: true, message: '请选择人员提醒角色', trigger: 'change' }],
        projectCredentialNotifyInterval: [{ required: true, message: '请输入资质有效提醒', trigger: 'change' }],
        projectServiceNotifyInterval: [{ required: true, message: '请输入服务周期提醒', trigger: 'change' }],
        projectNotifyRoles: [{ required: true, message: '请选择项目提醒角色', trigger: 'change' }],
        assetsBackNotifyInterval: [{ required: true, message: '请输入归还时间提醒', trigger: 'change' }],
        assetsOverRepairNotifyInterval: [{ required: true, message: '请输入过保时间提醒', trigger: 'change' }],
        assetsNotifyRoles: [{ required: true, message: '请选择设备提醒角色', trigger: 'change' }],
      },
      rolesOptions: [],
      changePassworOptions: [
        { label: '是', value: true },
        { label: '否', value: false },
      ],
      active: 0,
    }
  },
  mounted() {
    this.getConfigData()
    this.getRoleData()
  },
  methods: {
    /** 获取人员数据 */
    getRoleData() {
      getRole().then((res) => {
        let result = res.map((i) => {
          return {
            id: i.id,
            name: i.name ? i.name : i.account,
          }
        })
        console.log(result)
        this.rolesOptions = result
      })
    },
    /** 更新配置 */
    getConfigData() {
      getConfig().then((res) => {
        this.form = res
      })
    },
    /**
     *  表单提交
     */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let submitForm = JSON.parse(JSON.stringify(this.form))
          submitForm.peopleNotifyRoles = this.form.peopleNotifyRoles.join(',')
          submitForm.projectNotifyRoles = this.form.projectNotifyRoles.join(',')
          submitForm.assetsNotifyRoles = this.form.assetsNotifyRoles.join(',')
          updateConfig(submitForm).then((res) => {
            this.$message.success('保存成功')
            this.getConfigData()
          })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before,
::v-deep .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before {
  margin-left: -10px;
  margin-right: 4px;
}
::v-deep .el-input-group--append .el-input__inner {
  padding: 0 0 0 20px !important;
}
::v-deep .el-textarea {
  width: 42%;
}
::v-deep .el-form-item {
  margin-bottom: 20px;
}

::v-deep .el-alert__icon {
  color: #ff3535;
}

::v-deep .el-input-group--append {
  width: 200px;
}
.dark-theme .container,
.dark-theme .container .form-list {
  background: transparent !important;
}
.dark-theme {
  .container .form-list .box-radius {
    background: rgba(59, 139, 255, 0.1) !important;
    color: #fff !important;
  }
  .el-tooltip {
    color: #fff !important;
  }
}
.container {
  height: 100%;
  background: #eef0f5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .el-form {
    flex: 1 !important;
    overflow: auto;
  }
  .marg-rt {
    margin-right: 8px;
  }
  .footer {
    text-align: right;
    padding: 10px 20px;
  }
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
  }

  .form-list-title {
    margin-bottom: 20px;
  }

  .active {
    background: #4b6eef;
    color: #fff;
  }

  .el-icon {
    margin: 0 5px 0 5px;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.45);
    vertical-align: middle;
  }

  .form-list {
    background: #eef0f5;
    margin-bottom: 20px;
    &:nth-last-child(1) {
      margin-bottom: 0 !important;
    }
    .box-radius {
      padding: 30px;
      border-radius: 4px;
      background: #fff;
    }

    .alert-box {
      margin: 20px 0;
      background: #fff1f0;
      border: 1px solid rgba(255, 163, 158, 1);
      color: rgba(0, 0, 0, 0.65);
    }

    .form-lidt-l {
      width: calc(50% - 10px);
    }
  }
}
</style>
